import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:yysk_app/business/my_collection_Item_widget.dart';
import 'package:yysk_app/pages/main/home/invited_widget.dart';
import 'package:yysk_app/pages/main/main_controller.dart';
import 'package:yysk_app/pages/main/mine/mine_page_controller.dart';
import 'package:yysk_app/pages/nft_pages/my_friend/my_friend_page.dart';
import 'package:yysk_app/pages/nft_pages/my_group/my_group_list_page.dart';
import 'package:yysk_app/pages/nft_pages/order/order_page.dart';
import 'package:yysk_app/pages/nft_pages/wallet_pages/wallet/wallet_page.dart';
import 'package:yysk_app/routes/global_controller.dart';
import 'package:yysk_app/utils/colors.dart';
import 'package:yysk_app/utils/helper.dart';
import 'package:yysk_app/widget/empty_widget.dart';
import 'package:yysk_app/widget/image_asset_widget.dart';
import 'package:yysk_app/widget/lazy_network_image.dart';
import 'package:oktoast/oktoast.dart';

class MinePage extends StatefulWidget {
  const MinePage({super.key});

  @override
  State<MinePage> createState() => _MinePage();
}

class _MinePage extends State<MinePage> {
  static String path = '/mine';

  final GlobalController globalController = Get.find();

  final MinePageController controller = Get.find();
  final MainController mainController = Get.find();
  @override
  Widget build(BuildContext context) {
    double top = MediaQuery.of(context).padding.top;

    return Scaffold(
      body: Obx(
        () => Container(
          color: AppColors.backgroundColorBlack,
          padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
          child: RefreshIndicator(
            backgroundColor: AppColors.backgroundColorBlack,
            color: AppColors.backgroundColorBlack,
            onRefresh: _handleRefresh,
            child: CustomScrollView(
              controller: controller.scrollController,
              physics: AlwaysScrollableScrollPhysics(),
              slivers: [
                SliverToBoxAdapter(
                  child: Stack(
                    children: [
                      ..._background(),
                      Column(
                        children: [
                          SizedBox(
                            height: 88.px,
                            width: 375.px,
                            child: Stack(
                              children: [
                                Positioned(
                                  top: 57.px,
                                  left: 14.px,
                                  child: GestureDetector(
                                    onTap: () {
                                      mainController
                                          .mainScaffoldKey
                                          .currentState
                                          ?.openDrawer();
                                    },
                                    child: ImageAssetWidget(
                                      imageUrl: 'static/images/mine/pp.png',
                                      width: 18.px,
                                      height: 18.px,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Stack(
                            children: [
                              Container(
                                // height: 301.px,
                                width: 375.px,
                                decoration: BoxDecoration(),
                                child: Stack(
                                  children: [
                                    Padding(
                                      padding: EdgeInsets.fromLTRB(
                                        16.px,
                                        0,
                                        16.px,
                                        0,
                                      ),
                                      child: Container(
                                        margin: EdgeInsets.only(top: 111.px),
                                        width: context.width,
                                        child: Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Center(
                                              child: Container(
                                                padding: EdgeInsets.fromLTRB(
                                                  17.px,
                                                  17.px,
                                                  17.px,
                                                  12.px,
                                                ),
                                                width: 351.px,
                                                decoration: BoxDecoration(
                                                  border: Border.all(
                                                    width: 1.px,
                                                    color: Color.fromRGBO(
                                                      57,
                                                      231,
                                                      255,
                                                      0.2,
                                                    ),
                                                  ),
                                                  borderRadius:
                                                      BorderRadius.circular(
                                                        6.px,
                                                      ),
                                                ),
                                                child: Row(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,
                                                  children: [
                                                    _tabItem(
                                                      imgUrl:
                                                          'static/images/mine/p1.png',
                                                      label: '我的钱包',
                                                      onTap:
                                                          () => Get.toNamed(
                                                            WalletPage.path,
                                                          ),
                                                    ),
                                                    _tabItem(
                                                      imgUrl:
                                                          'static/images/mine/p2.png',
                                                      label: '我的订单',
                                                      onTap:
                                                          () => Get.toNamed(
                                                            OrderPage.path,
                                                          ),
                                                    ),
                                                    _tabItem(
                                                      imgUrl:
                                                          'static/images/mine/p3.png',
                                                      label: '我的好友',
                                                      onTap: () {
                                                        if (globalController
                                                                .user
                                                                .value!
                                                                .bindFlag ==
                                                            true) {
                                                          Get.toNamed(
                                                            MyFriendPage.path,
                                                          ); //已经填写邀请码
                                                        } else {
                                                          showInvitedSheet(); //还没填写邀请码
                                                        }
                                                      },
                                                    ),
                                                    _tabItem(
                                                      imgUrl:
                                                          'static/images/mine/p4.png',
                                                      label: '我的星盟',
                                                      onTap: () {
                                                        Get.toNamed(
                                                          MyGroupListPage.path,
                                                        );
                                                      },
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ),
                                            _midwidget(context: context),
                                            SizedBox(height: 10.px),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              _header(top: 13.px, controller: globalController),
                            ],
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                if (controller.type.value == 'Collection' &&
                    controller.listCollection.isEmpty)
                  const SliverToBoxAdapter(child: EmptyWidget()),
                if (controller.type.value == 'blindbox' &&
                    controller.listBlind.isEmpty)
                  const SliverToBoxAdapter(child: EmptyWidget()),
                if (controller.type.value == 'prop' &&
                    controller.listProp.isEmpty)
                  const SliverToBoxAdapter(child: EmptyWidget()),
                SliverPadding(
                  padding: EdgeInsets.fromLTRB(12.px, 0, 12.px, 50.px),
                  sliver: SliverGrid(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      crossAxisSpacing: 12.px,
                      mainAxisSpacing: 12.px,
                      childAspectRatio: 170.px / 227.px,
                    ),
                    delegate: SliverChildBuilderDelegate(
                      childCount:
                          controller.type.value == 'Collection'
                              ? controller.listCollection.length
                              : (controller.type.value == 'blindbox'
                                  ? controller.listBlind.length
                                  : controller.listProp.length),
                      (BuildContext context, int index) {
                        return LayoutBuilder(
                          builder: (
                            BuildContext context,
                            BoxConstraints constraints,
                          ) {
                            return MyCollectionItemWidget(
                              item:
                                  controller.type.value == 'Collection'
                                      ? controller.listCollection[index]
                                      : (controller.type.value == 'blindbox'
                                          ? controller.listBlind[index]
                                          : controller.listProp[index]),
                              type: controller.type.value,
                            );
                          },
                        );
                      },
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Future<void> _handleRefresh() async {
    globalController.getStaticData();
    globalController.getUserInfo();
    if (controller.type.value == 'Collection') {
      controller.getCollectionList();
    } else if (controller.type.value == 'blindbox') {
      controller.getBlindList();
    } else {
      controller.getPropList();
    }
    return;
  }

  _background() {
    return [
      Positioned(
        top: 0,
        left: 0,
        child: ImageAssetWidget(
          width: 375.px,
          height: 812.px,
          imageUrl: 'static/images/bg.png',
        ),
      ),
    ];
  }

  _header({
    double top = 120,
    double left = 12.5,
    required GlobalController controller,
  }) {
    // final userInfo = controller.user.value;
    return Positioned(
      top: top.px,
      left: left.px,
      child: Stack(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                clipBehavior: Clip.antiAlias,

                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100.px),
                  color: AppColors.backgroundColor,
                  border: Border.all(
                    width: 1.px,
                    color: AppColors.backgroundColor,
                  ),
                ),
                child: LazyImage(
                  imageUrl: '${globalController.user.value?.avatarImg}',
                  width: 60.px,
                  height: 60.px,
                  borderRadius: 100,
                ),
              ),
              SizedBox(width: 16.px),
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '${globalController.user.value?.nickName}(${globalController.user.value!.userTel?.substring(globalController.user.value!.userTel!.length - 4) ?? ''})',
                    style: TextStyle(
                      color: AppColors.fontColor,
                      fontSize: 20,
                      fontFamily: 'CustomPINGFANG',
                    ),
                  ),
                  SizedBox(height: 6.px),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      SizedBox(height: 9.px),
                      Text(
                        'ID:${globalController.user.value?.showId}',
                        style: TextStyle(
                          color: AppColors.backgroundColorGrey,
                          fontSize: 12.px,
                        ),
                      ),
                      SizedBox(width: 10.px),
                      GestureDetector(
                        onTap: () {
                          Clipboard.setData(
                            ClipboardData(
                              text:
                                  globalController.user.value?.showId
                                      .toString() ??
                                  '暂无数据',
                            ),
                          );
                          showToast('复制成功');
                        },
                        child: ImageAssetWidget(
                          imageUrl: 'static/images/mine/copy.png',
                          width: 12.px,
                          height: 12.px,
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 6.px),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      SizedBox(height: 9.px),
                      Text(
                        '区块链地区：${globalController.user.value!.chainAddress?.substring(0, 7) ?? ''}...${globalController.user.value!.chainAddress?.substring(globalController.user.value!.chainAddress!.length - 7) ?? ''}',
                        style: TextStyle(
                          color: AppColors.backgroundColorGrey,
                          fontSize: 12.px,
                        ),
                      ),
                      SizedBox(width: 10.px),
                      GestureDetector(
                        onTap: () {
                          Clipboard.setData(
                            ClipboardData(
                              text:
                                  globalController.user.value?.chainAddress ??
                                  '暂无数据',
                            ),
                          );
                          showToast('复制成功');
                        },
                        child: ImageAssetWidget(
                          imageUrl: 'static/images/mine/copy.png',
                          width: 12.px,
                          height: 12.px,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }

  _tabItem({
    required String label,
    required String imgUrl,
    required VoidCallback? onTap,
  }) {
    return GestureDetector(
      onTap: () {
        onTap!();
      },
      child: Container(
        constraints: BoxConstraints(minWidth: 48.px, maxWidth: 60.px),
        // width: 53.px,
        // margin: EdgeInsets.only(right: 18.px),
        child: Column(
          children: [
            Center(
              child: Container(
                width: 50.px,
                height: 50.px,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100),
                  color: Color.fromRGBO(57, 231, 255, 0.2),
                ),
                child: Center(
                  child: ImageAssetWidget(
                    imageUrl: imgUrl,
                    width: 24.px,
                    height: 24.px,
                    fit: BoxFit.contain,
                  ),
                ),
              ),
            ),
            SizedBox(height: 12.px),
            SizedBox(
              // width: 53.px,
              child: Text(
                label,
                style: TextStyle(
                  color: Color.fromRGBO(57, 231, 255, 1),
                  fontSize: 12.px,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  //中间区域
  _midwidget({required BuildContext context}) {
    return Container(
      width: context.width,
      color: AppColors.fontColorBlack,
      padding: EdgeInsets.fromLTRB(0, 40.px, 0, 20.px),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          ImageAssetWidget(
            imageUrl: 'static/images/home/zuizi.png',
            width: 24.px,
            height: 24.px,
          ),
          SizedBox(width: 8.px),
          Text(
            '藏品',
            style: TextStyle(fontSize: 18.px, color: AppColors.fontColor),
          ),
          SizedBox(width: 8.px),
          ImageAssetWidget(
            imageUrl: 'static/images/home/zuizi.png',
            width: 24.px,
            height: 24.px,
          ),
        ],
      ),
    );
  }
}
